<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Roger | Roger</title>
    <meta name="description" content="A VitePress site">
    <link rel="preload stylesheet" href="/docs/assets/style.688cd82e.css" as="style">
    
    <script type="module" src="/docs/assets/app.73a16568.js"></script>
    <link rel="preload" href="/docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/docs/assets/chunks/framework.906ebc88.js">
    <link rel="modulepreload" href="/docs/assets/chunks/theme.df409c6c.js">
    <link rel="modulepreload" href="/docs/assets/index.md.f1fd9f38.lean.js">
    <link rel="icon" href="favicon.ico">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-255ec12d><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ae3e3f51></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ae3e3f51> Skip to content </a><!--]--><!----><header class="VPNav" data-v-255ec12d data-v-7e5bc4a5><div class="VPNavBar top" data-v-7e5bc4a5 data-v-0937f67c><div class="container" data-v-0937f67c><div class="title" data-v-0937f67c><div class="VPNavBarTitle" data-v-0937f67c data-v-86d1bed8><a class="title" href="/docs/" data-v-86d1bed8><!--[--><!--]--><!----><!--[-->Roger<!--]--><!--[--><!--[--><!--[--><!--[--><!--]--><!--]--><!--]--><!--]--></a></div></div><div class="content" data-v-0937f67c><div class="curtain" data-v-0937f67c></div><div class="content-body" data-v-0937f67c><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-0937f67c><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-0937f67c data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/docs/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/frontend/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>前端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/browser/Chrome/eventLoop/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>浏览器</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/interview/Vue/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>面试题</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/source/Vue/render/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>框架源码</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-0937f67c data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-0937f67c data-v-40855f84 data-v-a7b5672a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-a7b5672a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-a7b5672a><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-a7b5672a><div class="VPMenu" data-v-a7b5672a data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-0937f67c data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><!----><!----><div class="VPContent is-home" id="VPContent" data-v-255ec12d data-v-669faec9><div class="VPHome" data-v-669faec9 data-v-d82743a8><!--[--><!--]--><div class="VPHero has-image VPHomeHero" data-v-d82743a8 data-v-da5d1713><div class="container" data-v-da5d1713><div class="main" data-v-da5d1713><!--[--><h1 class="name" data-v-da5d1713><span class="clip" data-v-da5d1713>ROGER.</span></h1><p class="text" data-v-da5d1713>Welcome To My Blog</p><p class="tagline" data-v-da5d1713>Technical blog for frontend engineers</p><!--]--><div class="actions" data-v-da5d1713><!--[--><div class="action" data-v-da5d1713><a class="VPButton medium brand" href="/docs/pages/interview/Vue/" data-v-da5d1713 data-v-567ba664>Let&#39;s go</a></div><div class="action" data-v-da5d1713><a class="VPButton medium alt" href="https://github.com/vuejs/vitepress" target="_blank" rel="noreferrer" data-v-da5d1713 data-v-567ba664>GitHub</a></div><!--]--></div></div><div class="image" data-v-da5d1713><div class="image-container" data-v-da5d1713><div class="image-bg" data-v-da5d1713></div><!--[--><!--[--><img class="VPImage image-src" src="/docs/logo.jpg" alt="Roger" data-v-8426fc1a><!--]--><!--]--></div></div></div></div><!--[--><!--[--><!--[--><div class="title" data-v-d2824422></div><!--]--><!--]--><!--]--><!--[--><!--]--><div class="VPFeatures VPHomeFeatures" data-v-d82743a8 data-v-39646fad><div class="container" data-v-39646fad><div class="items" data-v-39646fad><!--[--><div class="grid-3 item" data-v-39646fad><div class="VPLink no-icon VPFeature" data-v-39646fad data-v-33086751><!--[--><article class="box" data-v-33086751><div class="icon" data-v-33086751>🛠️</div><h2 class="title" data-v-33086751>frontend</h2><p class="details" data-v-33086751>javascript, typescript, vue, react</p><!----></article><!--]--></div></div><div class="grid-3 item" data-v-39646fad><div class="VPLink no-icon VPFeature" data-v-39646fad data-v-33086751><!--[--><article class="box" data-v-33086751><div class="icon" data-v-33086751>🚀</div><h2 class="title" data-v-33086751>backend</h2><p class="details" data-v-33086751>nodejs, nestjs, eggjs, mysql</p><!----></article><!--]--></div></div><div class="grid-3 item" data-v-39646fad><div class="VPLink no-icon VPFeature" data-v-39646fad data-v-33086751><!--[--><article class="box" data-v-33086751><div class="icon" data-v-33086751>📝</div><h2 class="title" data-v-33086751>interview</h2><p class="details" data-v-33086751>Share interview questions</p><!----></article><!--]--></div></div><!--]--></div></div></div><!--[--><!--]--><div style="position:relative;" data-v-d82743a8><div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"pages_browser_chrome_eventloop_index.md\":\"5289ad5f\",\"pages_frontend_css_index.md\":\"33d7f8f0\",\"pages_frontend_js_index.md\":\"071be8ee\",\"pages_source_vue_dataproxy_index.md\":\"2190e5bb\",\"pages_source_react_router_index.md\":\"aee956e0\",\"pages_frontend_html_index.md\":\"d07d2697\",\"pages_frontend_index.md\":\"9602a34e\",\"pages_source_vue_render_index.md\":\"82ef8cd2\",\"index.md\":\"f1fd9f38\",\"pages_source_vue_lifecycle_index.md\":\"e821fde5\",\"pages_source_vue_nexttick_index.md\":\"77c4fcb8\",\"pages_source_react_setstate_index.md\":\"79ab1da8\",\"pages_browser_chrome_render_index.md\":\"ef66fcb1\",\"pages_source_vue_watch_index.md\":\"07309914\",\"pages_source_react_purecomponent_index.md\":\"1489604b\",\"pages_interview_hc_index.md\":\"50eee13c\",\"pages_interview_vue_index.md\":\"26456aa4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"Roger\",\"description\":\"A VitePress site\",\"base\":\"/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端\",\"link\":\"/pages/frontend/\"},{\"text\":\"浏览器\",\"link\":\"/pages/browser/Chrome/eventLoop/\"},{\"text\":\"面试题\",\"link\":\"/pages/interview/Vue/\"},{\"text\":\"框架源码\",\"link\":\"/pages/source/Vue/render/\"}],\"sidebar\":[{\"text\":\"前端\",\"collapsed\":true,\"items\":[{\"text\":\"HTML\",\"link\":\"/pages/frontend/HTML/\"},{\"text\":\"CSS\",\"link\":\"/pages/frontend/CSS/\"}]},{\"text\":\"浏览器\",\"collapsed\":true,\"items\":[{\"text\":\"事件循环\",\"link\":\"/pages/browser/Chrome/eventLoop/\"},{\"text\":\"渲染原理\",\"link\":\"/pages/browser/Chrome/render/\"}]},{\"text\":\"源码解析\",\"collapsed\":true,\"items\":[{\"text\":\"Vue\",\"collapsed\":true,\"items\":[{\"text\":\"模版渲染\",\"link\":\"/pages/source/Vue/render/\"},{\"text\":\"生命周期\",\"link\":\"/pages/source/Vue/lifeCycle/\"},{\"text\":\"data数据代理\",\"link\":\"/pages/source/Vue/dataProxy/\"},{\"text\":\"nextTick\",\"link\":\"/pages/source/Vue/nextTick/\"},{\"text\":\"watch监听\",\"link\":\"/pages/source/Vue/watch/\"}]},{\"text\":\"React\",\"collapsed\":true,\"items\":[{\"text\":\"PureComponent原理\",\"link\":\"/pages/source/React/PureComponent/\"},{\"text\":\"React路由配置\",\"link\":\"/pages/source/React/router/\"},{\"text\":\"setState使用及原理\",\"link\":\"/pages/source/React/setState/\"}]}]},{\"text\":\"面试题\",\"collapsed\":true,\"items\":[{\"text\":\"Vue\",\"link\":\"/pages/interview/Vue/\"},{\"text\":\"HTML&CSS\",\"link\":\"/pages/interview/HC/\"}]}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>